<template>
  <view class="container">
    <u-navbar
      :is-fixed="true"
      :border-bottom="false"
      :is-back="true"
      :background="{ background: '#5697F1' }"
      title="订单详情"
      title-color="#fff"
    >
    </u-navbar>
		<u-toast ref="uToast" />
		<u-popup v-model="show" mode="bottom">
			<view class="popup">
				<view class="top">退票金额明细</view>
				<view class="row">
					<view>退票费</view>
					<view>2元/张</view>
				</view>
				<view class="row">
					<view>应退票款</view>
					<view>¥ {{ backMoney }}</view>
				</view>
				<view class="row">
					<view>取消退票</view>
					<view class="confirm" @click="doTP">确定退票</view>
				</view>
			</view>
		</u-popup>
		<view class="flex-between header">
			<view>订单号：{{ option.no }}</view>
			<view>下单时间：{{ option.orderTime }}</view>
		</view>
    <view class="tickets">
      <view class="each">
        <view class="row">
          <view class="block">
            <view class="cn">{{option.startStation}}</view>
            <view>{{option.startTime}}</view>
          </view>
          <view class="block">
            <view class="cn">{{option.trainName}}</view>
            <view>历时{{option.totalTime}}</view>
          </view>
          <view class="block">
            <view class="cn">{{option.endStation}}</view>
            <view>{{option.endTime}}</view>
          </view>
        </view>
				<view style="color: gray;">车票当日当次有效</view>
				<view class="btns" v-if="option.status === '已支付'">
					<view class="btn"></view>
					<view class="btn br" @click="GQ(option)">改签</view>
					<view class="btn" @click="TP()">退票</view>
				</view>
      </view>
      <view class="each-p" v-for="(p, pIndex) in peoples" :key="pIndex">
        <view class="head">
          <view class="name">{{p.realname}}</view>
          <view class="name typeF" v-if="p.examine === 'true'">{{p.typeF}}</view>
        </view>
        <view class="cardno cardtype">{{p.cardtypeF}}</view>
        <view class="cardno">{{p.cardno}}</view>
        <view class="cardno">{{ option.seatInfo }} {{p.seats}}</view>
				<view class="price">¥{{ p.price }}</view>
      </view>
    </view>
    
  </view>
</template>

<script>
import moment from 'moment'
import { updateOrder } from '../../api/system/api'
export default {
  data() {
    return {
      station: {},
      mode: 'date',
      show: false,
			today: moment().format('YYYY-MM-DD'),
      ticket: {},
      curIndex: 0,
      ticket: {},
      peoples: [],
      cardtypeList: ['中国居民身份证', '港澳居民来往内地通行证', '台湾居民来往大陆通行证', '护照'],
      typeList: ['成人', '儿童', '学生', '残军'],
      totalPrice: 0,
      userInfo: {},
      option: {},
			backMoney: '',
    };
  },
  onLoad(option) {
    this.option = JSON.parse(option.data)
    this.peoples = this.option.passangers;
  },
  methods: {
		// 改签
		GQ(option) {
			if (moment(`${option.ticketTime} ${option.startTime}`).diff(moment(), 'hours') < 2) {
				this.$refs.uToast.show({
          title: '发车前两小时可以改签！',
          type: 'error',
        })
        return
			}
			this.$u.route('/pages/interest/ticket', {
				start: this.option.startStation,
				end: this.option.endStation,
				date: this.option.ticketTime,
				option: JSON.stringify(option)
			})
		},
		// 退票
		TP() {
			// 发车前两小时才能退票
			if (moment(`${this.option.ticketTime} ${this.option.startTime}`).diff(moment(), 'hours') < 2) {
				this.$refs.uToast.show({
          title: '发车前两小时可以退票！',
          type: 'error',
        })
        return
			}
			this.show = true;
			let total = this.option.passangers.reduce((a, b) => {
				return a + Number(b.price)
			}, 0)
			this.backMoney = (total - this.option.passangers.length * 2).toFixed(2)
		},
		doTP() {
			updateOrder(this.option.id, {
				status: '已退票'
			}).then(res => {
				if (res.code === 200) {
					this.$refs.uToast.show({
						title: '退票成功',
						type: 'success',
					})
					this.show = false;
					setTimeout(() => {
						uni.$emit('refreshOrder', {
							refresh: true
						})
						uni.navigateBack({
							delta: 1,
						});
					}, 1000)
				}
			})
		}
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f1ebeb;
  min-height: 100vh;
  overflow: hidden;
  padding: 30rpx;

	.header {
		font-size: 20rpx;
	}
}
.flex-between {
	display: flex;
	justify-content: space-between;
}
.station {
  display: flex;
  width: 50%;
  margin: 0 auto;
  align-items: center;
  font-size: 40rpx;
  justify-content: space-around;
  font-weight: bold;
  .img {
    width: 50rpx;
    height: 50rpx;
  }
}
.date {
	display: flex;
	padding: 30rpx 60rpx 0 60rpx;
	font-size: 30rpx;
	justify-content: space-between;

	.img {
		width: 60rpx;
		height: 60rpx;
	}
}
.tickets {
  padding: 20rpx;
  width: 100%;
	margin: 20rpx 0;
  background: #fff;
	border-radius: 20rpx;
  .each {
		border-bottom: 1rpx solid #e4dada;
    .row {
      display: flex;
      width: 100%;
      justify-content: space-between;
      font-size: 30rpx;
      font-weight: bold;
      padding: 20rpx 0;
      .cn {
        font-size: 26rpx;
        margin-bottom: 10rpx;
				text-align: center;
      }
    }
  }

}
.each-p {
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #e4dada;
	position: relative;
	.price {
		position: absolute;
		right: 10rpx;
		top: 0rpx;
		color: orange;
		font-size: 30rpx;
		font-weight: bold;
	}
  .head {
    display: flex;
    width: 100%;
    gap: 20rpx;
    font-weight: bold;
    margin-top: 20rpx;
    align-items: center;
  }
  .cardno {
    margin-top: 10rpx;
  }
}
.cardtype {
  color: #a99e9e;
}
.name {
  font-size: 32rpx;
}
.typeF {
  border: 1rpx solid lightblue;
  padding: 5rpx 10rpx;
  font-size: 25rpx;
  font-weight: normal;
}
.totalCn {
  font-size: 20rpx;
  color: gray;
}
.totalQ {
  font-size: 30rpx;
  color: orange;
}
.btns {
	display: flex;
	justify-content: flex-end;
	padding: 20rpx 0;
	.btn {
		flex: 1;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		color: #adade2;
	}

	.br {
		border-right: 1rpx solid #adade2;
	}
}
.popup {
	padding-bottom: 40rpx;
	.top {
		font-size: 30rpx;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		background: #131315;
		color: #fff;
	}

	.row {
		font-size: 30rpx;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		justify-content: space-between;
		padding: 10rpx 30rpx;
		align-items: center;
	}
	
}
.confirm {
	text-align: center;
	background: #e6803a;
	color: #fff;
	height: 50rpx;
	line-height: 50rpx;
	padding: 0 10rpx;
	border-radius: 8rpx;
}
</style>
